<template>
  <el-dialog
    v-dialogDrag
    :visible="popupsVisible"
    :title="titleName"
    center
    width="70%"
    top="2rem"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="closeEdit"
  >
    <dialogHeader slot="title" :title="titleName" :style-type="$store.state.app.dialogType" />
    <div
      :key="formKey"
      class="filter-container filter-params"
    >
      <one-table-template
        ref="multipleTable"
        :dynamic-buttons="tableButtons"
        :dynamic-components="tableComponents"
        :dynamic-api-config="apiConfig"
        :dynamic-form-fields="formField"
      />
    </div>
  </el-dialog>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { orgApis } from '@/api/vesalesapi.js'
import OneTableTemplate from '@/components/templates/oneTable'
import dialogHeader from '@/components/dialogHeader'
export default {
  components: {
    OneTableTemplate,
    dialogHeader
  },
  mixins: [oneTableWithViewTemplateMixins],
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dataForForm: {
      type: Object,
      default: () => {}
    },
    titleName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formKey: '',
      apiConfig: {},
      // 动态组件-查询条件
      tableComponents:
      [
        {
          compKey: 'compKey7',
          labelName: '交付门店：',
          codeField: 'deliveryDlrCode',
          filterable: true,
          disabled: true,
          component: () => import('@/components/org/commonSelect'),
          oFields: 'deliveryDlrCode,deliveryDlrShortName',
          customObj: {
            api: orgApis.ListOfDeliveryStore, selectType: '1'
          },
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey6',
          span: 8,
          isComponent: true,
          labelName: '变更后交付仓库：',
          disabled: true,
          codeField: 'newCarHouseName',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'compKey8',
          labelName: '交付专员：',
          codeField: 'empId',
          textField: 'codeName',
          filterable: true,
          component: () => import('@/components/org/commonSelect'),
          parentFileds: 'value:deliveryDlrCode',
          oFields: 'empId,codeName',
          customObj: {
            listQuery: {
              deliveryDlrCode: ''
            },
            api: orgApis.ListOfdeliveryPersonnel, selectType: '1'
          },
          isMust: true,
          span: 8
        }
      ],
      // form 的表单对象
      formField: {
        deliveryDlrCode: this.dataForForm.newDlrCode,
        newCarHouseName: this.dataForForm.newCarHouseName,
        empId: ''
      },
      // 动态组件-按钮
      tableButtons: [
        {
          name: 'save',
          text: '确定',
          clickEvent: () => { this.save() },
          position: 'right',
          isMust: false,
          type: 'primary'
        },
        {
          name: 'cancel',
          text: '取消',
          clickEvent: () => this.closeEdit(),
          position: 'right'
        }
      ]
    }
  },
  // watch: {
  //   popupsVisible(val) {
  //     if (val) {
  //       const obj = {
  //         deliveryDlrCode: this.dataForForm.newDlrCode,
  //         newCarHouseName: this.dataForForm.newCarHouseName
  //       }
  //       Object.assign(this.formField, obj)
  //     }
  //   }
  // },
  methods: {
    // 关闭弹窗
    closeEdit(type) {
      this.$emit('close', type)
    },

    // 保存
    save() {
      var data
      if (this.titleName === '交付专员选择') {
        if (this.formField.empId === '') { this.$message('请选择交付专员！'); return }
        data = { empId: this.formField.empId }
      } else {
        if (this.formField.zbRejectReason === '') { this.$message('请填写驳回原因！'); return }
        data = { zbRejectReason: this.formField.zbRejectReason }
      }
      // this.$emit('save', Object.assign(this.dataForForm, data))
      this.save1([Object.assign(this.dataForForm, data)])
    },
    // 通过
    save1(res) {
      const that = this
      const queryObj = {
        // api配置
        apiConfig: orgApis.deliveryPlaceChangeHQConfirm,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: {
          // 当前中台使用的名称有dataInfo、info，具体查看API文档
          dataInfo: { infoList: res }
        }
      }
      // 转换了中台请求格式数据
      var paramD = that.$getParams(queryObj)
      // 调用中台API方法（可复用）
      that.$requestAPI(paramD).then(response => {
        this.$message({
          message: response.msg,
          duration: 2000
        })
        if (response.result === '1') {
          this.closeEdit('1')
        }
      })
    }
  }
}
</script>

